<template>
  <div class="page-index" v-if="ShortVideoList">
    <div class="back-nav">
        <span class="back-icon" @click.stop="leave"></span>
      </div>
    <div class="swiper mySwiper swiper-initialized swiper-vertical swiper-ios swiper-backface-hidden">   
        <div class="swiper-wrapper" id="swiper-wrapper-b59a711b1cd07448" aria-live="polite">
        <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 9" style="height: 667px;" v-for="item in ShortVideoList" :key="item.id">
         <div class="video-wrapper">
        <div class="play-wrapper" @click.stop="pause(item.id)">
        <div class="flex-center-wrapper" :style="{'background-image':!playflag?'url('+item.video.imgUrl+')':'none'}" ref="wrap">
          <div class="play-btn" @click.stop="play(item.id)"></div>
        </div>
      </div>
      <div class="info-wrapper">
        <div class="relate-movie" v-if="item.product && movieInfo" @click.stop="detail(movieInfo.id)">
          <div class="movie-img" >
            <img :src="movieInfo.img" alt="">
          </div>
            <div class="rightInfo">
              <div class="leftre">
                <div class="movie-nm line-ellipsis">{{movieInfo.nm}}</div>
                <div class="movie-sc">{{movieInfo.sc}}分</div>
              </div>
              <div class="rightre" @click.stop="moviebuy(movieInfo.id)">购票</div>
            </div>
        </div>
        <div class="title">
          {{item.title}}
        </div>
        <div class="slider">
          <van-slider 
            v-model="currentPlay"
            bar-height="1px"
            button-size="0px" 
            inactive-color="transparent"
            active-color="#ee0a24" 
             />
        </div>
      </div>
      <div class="right-wrapper">
        <div>
          <div class="header-img">
            <img
              class="header-pic"
              :src="item.user.avatarurl"
              alt=""
            />
          </div>
          <div class="btn">
            <div class="icon-btn" @click="up(item.id)">
              <img v-if="!item.alreadyUp" src="../assets/images/z.png" alt="" />
              <img v-else src="../assets/images/alreadyUp.png" alt="" />
            </div>
            <div class="text">{{item.upCount}}</div>
          </div>
          <div class="btn">
            <div class="icon-btn" @click="talk">
              <img src="../assets/images/whitePl.png" alt="" />
            </div>
            <div class="text">评论</div>
          </div>
          <div class="btn">
            <div class="icon-btn">
              <img src="../assets/images/whiteFx.png" alt="" />
            </div>
            <div class="text">分享</div>
          </div>
        </div>
      </div>
      <div class="bg-wrapper"></div>
      <video
        webkit-playsinline="true"
        x-webkit-airplay="true"
        playsinline=""
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        preload="auto"
        t7-video-player-type="inline"
        id="video"
        class="video-box hide"
        :src="item.video.url"
        :poster="item.video.imgUrl"
        alt=""
        ref="video"
        @timeupdate="ontimeupdateFun"
        @ended="onendedFun"
      >
      </video>
        </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
    </div>  
    </div>
    <van-popup v-model:show="show" round position="bottom" closeable="true" :style="{ height: '80%' }">
      <div class="content">
        <div class="title">评论 <span class="num">({{newCommit.length}})</span></div>
        <div class="commit-box">
          <div class="comment-item" v-for="(item,index) in newCommit" :key="index">
            <!-- <img src="" alt="" class="avatar"> -->
            <span class="avatar"></span>
            <div class="right">
                <div class="top-box">
                    <div class="name-box">
                        <span class="nick">{{item.name}}</span>
                        <div class="nick-level"></div>
                    </div>
                    <div class="time-box">
                        <time>{{sendTime(item.time)}}</time>
                    </div>
                    <div class="more-box" @click="del(index)">
                        <img src="../assets/images/叉叉.png" alt="" class="more-img">
                    </div>
                </div>
                <div class="content-box">{{item.content}}</div>
                <div class="bottom">
                    <div class="appro-box" @click="comUp(index)">
                        <img v-if="!item.alreadyZan" src="../assets/images/video-praise.png" alt="" class="zan-img">
                        <img v-else src="../assets/images/video-praised.png" alt="" class="zan-img">
                        <span v-if="!item.alreadyZan" class="zan-span">赞</span>
                        <span v-else class="zan-span">1</span>
                    </div>
                </div>
            </div>
          </div>
        
          <div class="nothing" v-if="newCommit.length==0">
            <img src="../assets/images/nothing.png" alt="">
            <!-- <div>啥也没有啊~</div> -->
        </div>
        </div>
         <div class="replay-con">
        <div class="replay-left">
            <input type="text" v-model="word"  placeholder="写评论">
        </div>
        <div class="replay-right">
            <span :class="['send',{'sendactive':sendColor}]" @click="addword">发送</span>
        </div>
    </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { ref,onMounted, nextTick,onBeforeUnmount, watch } from 'vue';
import { useRouter } from 'vue-router'
import {getMovieIntro} from "../api/movie"
import Swiper from "swiper"
export default {
    setup() {
        const store = useStore()
        const router = useRouter()

        //获取vuex state数据-视频ID
        let shortVideoId = ref(store.state.shortVideoId);
        let ShortVideoList = JSON.parse(window.localStorage.getItem('videolive'))==undefined?ref([]):ref(JSON.parse(window.localStorage.getItem('videolive')))
        let currentShortVideo = ref(null)
        let index = ref(null)
        let dataIndex = ref(null)
        //视频原生DOM
        let video = ref(null)

        //电影ID列表
        let movieInfoIdList = ref([])
        //电影信息
        let movieInfo = ref(null)

        //当前电影评论下标
        let commitIndex = ref(null)
        //从本地获取评论信息
        let commitlist = JSON.parse(window.localStorage.getItem('shortcommitlist'))==null?ref([]):ref(JSON.parse(window.localStorage.getItem('shortcommitlist')))
        // 当前视频评论
        let newCommit = ref(null)

        // 获取电影信息
        let getMoveInfoData = (id) =>{
          getMovieIntro({movieId:id}).then(data=>{
              // console.log(data);
              movieInfo.value=data.data.movie
              
            })
        }

        //获取数据
        let getDataFun = () =>{ 
            console.log(shortVideoId.value);
            index.value = ShortVideoList.value.findIndex(item=>item.video.id==shortVideoId.value)
            currentShortVideo.value=ShortVideoList.value[index.value]
            ShortVideoList.value.splice(index.value,1)
            ShortVideoList.value.unshift(currentShortVideo.value)
            let index2 = ShortVideoList.value.findIndex(item=>item.video.id==shortVideoId.value)
            dataIndex.value=index2
            commitIndex.value = commitlist.value.findIndex(item=>item.id==currentShortVideo.value.id)
            newCommit.value=commitlist.value[commitIndex.value]==undefined?[]:commitlist.value[commitIndex.value].commiInfo
            let alluplist = JSON.parse(window.localStorage.getItem('uplist'))
            if (alluplist!=null) {
              ShortVideoList.value.forEach(item=>{
                if (item.product) {                 
                  movieInfoIdList.value.push(item.product.productId)
                }else{
                  movieInfoIdList.value.push(0)
                }
                alluplist.forEach(k=>{
                  if (item.id==k.id) {
                      item.alreadyUp=k.alreadyUp
                      item.upCount=k.upCount
                  }
                })
              })
            }
            // console.log(movieInfoIdList.value);
            if (movieInfoIdList.value[0]!=0) {
              getMoveInfoData(movieInfoIdList.value[0])
            }else{
              getMoveInfoData(movieInfoIdList.value[1])
            }

        }
        getDataFun()

        let playflag = ref(false)
        let wrap = ref(null)
        //播放视频
        let play = (id) =>{
          let index = ShortVideoList.value.findIndex(item=>item.id==id)
          dataIndex.value=index
          video.value[index].play()
          playflag.value=true
          timeRight.value = video.value[index].duration
          wrap.value[index].style.backgroundImage='none'
          wrap.value[index].style.backgroundColor='transparent'
          wrap.value[index].children[0].style.display='none'

        }

        //暂停视频
        let pause = (id) =>{
          let index = ShortVideoList.value.findIndex(item=>item.id==id)
          video.value[index].pause()
          wrap.value[index].children[0].style.display='block'
        }

        //返回
        let leave = () =>{
          video.value[dataIndex.value].pause()
          wrap.value[dataIndex.value].children[0].style.display='block'
          setTimeout(() => {
            router.push('/shortvideo')
          }, 200);
        }

        //进度条
        let timeLeft = ref(null)
        let timeRight = ref(null)
        let currentPlay = ref(0)

        //进度条
        let ontimeupdateFun = () =>{
            timeLeft.value=video.value[dataIndex.value].currentTime 
            currentPlay.value = 100*(timeLeft.value/timeRight.value);// 计算进度条值        
        }
        //视频结束时
        let onendedFun = () =>{
          video.value[dataIndex.value].pause()
          video.value[dataIndex.value].currentTime = 0
          wrap.value[dataIndex.value].children[0].style.display='block'

        }

        //点赞
        let uplist =JSON.parse(window.localStorage.getItem('uplist'))==null?ref([]):ref(JSON.parse(window.localStorage.getItem('uplist')))
        let up = (id) =>{
          let token = window.localStorage.getItem("token");
          if (!token) {
            router.push("/login");
            return
         } 
          let index = ShortVideoList.value.findIndex(item=>item.id==id)
          let i = uplist.value.findIndex(item=>item.id==id)
          ShortVideoList.value[index].alreadyUp=!ShortVideoList.value[index].alreadyUp
          if (ShortVideoList.value[index].alreadyUp && i==-1) {
            ShortVideoList.value[index].upCount=ShortVideoList.value[index].upCount+1
            let temp = {
              id:ShortVideoList.value[index].id,
              alreadyUp:ShortVideoList.value[index].alreadyUp,
              upCount:ShortVideoList.value[index].upCount
            }
            uplist.value=[...uplist.value,temp]
          }else{
            ShortVideoList.value[index].upCount=ShortVideoList.value[index].upCount-1
            uplist.value.splice(i,1)
          }
          
          window.localStorage.setItem('uplist',JSON.stringify(uplist.value))
        }

        //评论
        let show = ref(false)
        //评论弹出层
        let talk = () =>{
          show.value=true   
          commitIndex.value = commitlist.value.findIndex(item=>item.id==ShortVideoList.value[dataIndex.value].id)
          if (commitIndex.value!=-1) {
            newCommit.value=commitlist.value[commitIndex.value].commiInfo
          }else{
            newCommit.value=[]
          }
        }
        //评论内容
        const word = ref('')
        let commit = ref({
            id:null,
            commiInfo:[]
        })
        //添加评论
        let addword =() =>{
          let token = window.localStorage.getItem("token");
        if (!token) {
            router.push("/login");
            return
        } 
          commitIndex.value = commitlist.value.findIndex(item=>item.id==ShortVideoList.value[dataIndex.value].id)
          if (commitIndex.value!=-1) {
              commitlist.value[commitIndex.value].commiInfo = [...commitlist.value[commitIndex.value].commiInfo,{
                  name:'小赵',
                  content:word.value,
                  alreadyZan:false,
                  time:new Date().getTime()
              }]
          }else{
              commit.value.id=ShortVideoList.value[dataIndex.value].id
              commit.value.commiInfo = [...commit.value.commiInfo,{
                  name:'小赵',
                  content:word.value,
                  alreadyZan:false,
                  time:new Date().getTime()
              }]
               commitlist.value=[...commitlist.value,commit.value]
          }

          commitIndex.value = commitlist.value.findIndex(item=>item.id==ShortVideoList.value[dataIndex.value].id)
          newCommit.value=commitlist.value[commitIndex.value]==undefined?[]:commitlist.value[commitIndex.value].commiInfo

          window.localStorage.setItem('shortcommitlist',JSON.stringify(commitlist.value))

          word.value=''
        }
        //发送按钮颜色
        let sendColor = ref(false)
        watch(()=>{
            if (word.value!='') {
                sendColor.value=true
            }else{
                sendColor.value=false
            }
        })

        //评论时间判断
        let sendTime = (value) =>{
        let time = new Date()
        let times = time.getTime()
        let nowtime = times-value
        if (nowtime < 0) {

            return ''

        } else if ((nowtime / 1000 < 30)) {

            return '刚刚'

        } else if (nowtime / 1000 < 60) {

            return parseInt((nowtime / 1000)) + '秒前'

         } else if ((nowtime / 60000) < 60) {

            return parseInt((nowtime / 60000)) + '分钟前'

        } else if ((nowtime / 3600000) < 24) {

            return parseInt(nowtime / 3600000) + '小时前'

        } else if ((nowtime / 86400000) < 31) {

            return parseInt(nowtime / 86400000) + '天前'

        } else if ((nowtime / 2592000000) < 12) {

            return parseInt(nowtime / 2592000000) + '月前'

        } else {

            return parseInt(nowtime / 31536000000) + '年前'

        }

        }
        //点赞评论
        let comUp = (index) =>{
          newCommit.value[index].alreadyZan=!newCommit.value[index].alreadyZan
          commitlist.value[commitIndex.value].commiInfo=newCommit.value
          window.localStorage.setItem('shortcommitlist',JSON.stringify(commitlist.value))
        }
        //删除评论
        let del =(index) =>{
          newCommit.value.splice(index,1)
          if (commitIndex.value!=-1) {
              commitlist.value[commitIndex.value].commiInfo=newCommit.value
              window.localStorage.setItem('shortcommitlist',JSON.stringify(commitlist.value))
          }
        }

        //详情
        let detail=(id)=>{
          // console.log(id);
          video.value[dataIndex.value].pause()
          store.commit("detail",id)
          setTimeout(()=>{
            router.push(
            {
              path :'/moviedetail',
              query:{
               id:20
              }
            }
          )
          },300)
        }
        // 购票
        let moviebuy=(id)=>{
          // console.log(id);
          video.value[dataIndex.value].pause()
          setTimeout(() => {
            router.push({
            path:'./ticketpurchase',
            query:{
              movieId:id,
              cityId:20

            }
          })
          }, 300);
        }

        //swiper初始化
        onMounted(()=>{
            nextTick(()=>{
              new Swiper('.mySwiper', {
                  direction: 'vertical',
                  height:667,
                  spaceBetween: 0,
                  observer:true,//自动初始化swiper对象
                  observeParents:true,//自动初始化父节点swiper对象
                  
                  on:{
                      slidePrevTransitionStart: function(){
                          // console.log(video.value[this.activeIndex+1]);
                          getMoveInfoData(movieInfoIdList.value[this.activeIndex])
                          let index = this.activeIndex+1
                          dataIndex.value=this.activeIndex
                          playflag.value=true
                          timeRight.value = video.value[this.activeIndex].duration
                          ontimeupdateFun()
                          if (this.activeIndex!=index) {
                            video.value[index].pause()
                            video.value[index].currentTime = 0
                            wrap.value[index].children[0].style.display='block'
                          }
                          video.value[this.activeIndex].play()
                          wrap.value[this.activeIndex].children[0].style.display='none'
                          wrap.value[this.activeIndex].style.backgroundImage='none'
                          wrap.value[this.activeIndex].style.backgroundColor='transparent'
                          
                      },
                      slideNextTransitionEnd: function(){
                          // console.log(video.value[this.activeIndex-1]);
                          getMoveInfoData(movieInfoIdList.value[this.activeIndex])
                          let index = this.activeIndex-1
                          dataIndex.value=this.activeIndex
                          playflag.value=true
                          timeRight.value = video.value[this.activeIndex].duration
                          ontimeupdateFun()
                          if (this.activeIndex!=index) {
                            video.value[index].pause()
                            video.value[index].currentTime = 0
                            wrap.value[index].children[0].style.display='block'
                          }
                          video.value[this.activeIndex].play()
                          wrap.value[this.activeIndex].children[0].style.display='none'
                          wrap.value[this.activeIndex].style.backgroundImage='none'
                          wrap.value[this.activeIndex].style.backgroundColor='transparent'
                          
                      },
                  }

               });
            })
        })

        onBeforeUnmount(()=>{
          // window.localStorage.removeItem('videolive')
        })

        return {
          shortVideoId,
          ShortVideoList,
          video,
          play,
          playflag,
          pause,
          leave,
          wrap,
          ontimeupdateFun,
          onendedFun,
          currentPlay,
          up,
          show,
          talk,
          addword,
          word,
          sendColor,
          newCommit,
          sendTime,
          comUp,
          del,
          movieInfo,
          detail,
          moviebuy  
        }
    }
  
};
</script>

<style lang="less" scoped>
.page-index {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;

  .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #eee;

    .play-wrapper {
      width: 100%;
      height: 100%;
      position: absolute;
      background: transparent;
      left: 0;
      top: 0;
      z-index: 10;

      .flex-center-wrapper {
        // background: url(http://p1.meituan.net/movie/90e3e427beef4871c05906d77abb058517255.jpg)
        //   no-repeat;
        background-repeat: no-repeat;
        background-color: black;
        background-size: cover!important;
        background-position-x: center !important;
        background-position-y: center !important;

        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

        .play-btn {
          width: 60px;
          height: 60px;
          background-image: url("../assets/images/playIcon.png");
          background-size: 100% 100%;
        }
      }
    }
    .info-wrapper {
      color: #fff;
      letter-spacing: 0;
      line-height: 24px;
      text-shadow: 0 0 3px rgb(0 0 0 / 30%);
      width: 282px;
      position: absolute;
      bottom: 71px;
      left: 15px;
      z-index: 100;

      .relate-movie{
        width: 160px;
        height: 50px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 3px 5px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 6px;

        .movie-img{
          width: 30px;
          border-radius: 2px;
          overflow: hidden;
          &>img{
            width: 100%;
            height: 100%;
          }
        }
        .rightInfo{
          flex: 1;
          margin-left: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .leftre{
            width: 60px;
            line-height: 20px;
            .movie-nm{
              color: #fff;
              font-size: 13px;
              font-weight: bold;
            }
            .movie-sc{
              color: #d58a20;
              font-size: 12px;
            }
          }
          .rightre{
            font-size: 13px;
            padding: 2px 11px;
            background-color: #f03d37;
            color: #fff;
            border-radius: 13px;
          }
        }
      }

      .title {
        font-family: PingFangSC-Medium;
        font-size: 14px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        margin-bottom: 10px;
      }
      .slider{
        width: 340px;
        position: absolute;
        bottom: -35px;
      }
    }
    .right-wrapper {
      position: absolute;
      right: 15px;
      bottom: 58px;
      width: 48px;
      z-index: 100;

      .header-pic {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-bottom: 26px;

        .header-pic {
          width: 48px;
          height: 48px;
          display: block;
        }
      }
      .btn {
        text-align: center;
        .icon-btn {
          width: 48px;
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.42);
          border-radius: 50%;
          margin-bottom: 4px;

          & > img {
            width: 21.5px;
            height: 21.5px;
          }
        }
        .text {
          color: #fff;
          font-size: 14px;
          margin-bottom: 14px;
        }
      }
    }
    .bg-wrapper {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 182px;
      background-image: linear-gradient(
        180deg,
        transparent,
        rgba(0, 0, 0, 0.72)
      );
    }
    .video-box{
        width: 100%;
        height: 100%;
        // background-color: #000;
    }
  }
  .back-nav{
      width: 100%;
      height: 35px;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      z-index: 5;

      .back-icon {
          display: inline-block;
          width: 15px;
          height: 15px;
          margin-left: 15px;
          position: relative;

          &::before{
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-bottom: 2px solid #fff;
            border-left: 2px solid #fff;
            transform: rotate(45deg);
            opacity: 0.7;
          }
      }
       
    }
}

::v-deep .van-popup{

  .content{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
    .title{
      width: 100%;
      padding: 10px 5px;
      font-weight: bold;
      border-bottom: 1px solid #f5f5f5;

      .num{
        font-size: 14px;
        color: #999;
      }
    }
    .commit-box{
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      .comment-item{
           margin-top: 26px;
           display: flex;
           align-items: flex-start;
           border-bottom: 1px solid #f5f5f5;

           .avatar{
               width: 34px;
               height: 34px;
               border-radius: 50%;
               background-image: url('../assets/images/maouanloading.png');
               background-repeat: no-repeat;
               background-size: cover;
               overflow: hidden;
           }
           .right {
              flex: 1;
              margin-left: 11px;
              padding-bottom: 15px;
              position: relative;

              .top-box{
                  height: 35px;
                  position: relative;

                  .name-box{
                      display: flex;
                      height: 18px;
                      align-items: center;

                      .nick{
                          display: inline-block;
                          max-width: 150px;
                          color: #333;
                          font-size: 12px;
                          font-style: normal;
                          vertical-align: inherit;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                      }
                      .nick-level {
                          margin-left: 5px;
                          display: inline-block;
                          width: 36.5px;
                          height: 17px;
                      }
                  }
                        .time-box{
                            height: 18px;
                            position: absolute;
                            top: 21px;
                            font-weight: 400;
                            font-family: PingFangSC-Regular;
                            font-size: 12px;
                            color: #999;
                            letter-spacing: 0;
                            line-height: 18px;
                        }
                        .more-box{
                            position: absolute;
                            display: flex;
                            align-items: center;
                            width: 13px;
                            height: 17px;
                            right: 18px;
                            top: 0px;

                            .more-img{
                                width: 13px;
                                height: 13px;
                                background: none;
                            }
                        }
                    }
                    .content-box{
                        height: 21px;
                        margin-top: 6px;
                        font-family: PingFangSC-Regular;
                        font-size: 15px;
                        color: #333;
                        letter-spacing: 0;
                        text-align: justify;
                        line-height: 21px;
                        padding-right: 15px;
                    }
                    .text-expander{
                        cursor: pointer;
                        margin: 10px 15px 0 0;
                        background: #f5f5f5;
                        border-radius: 2px;
                        padding: 9px 8px;
                        font-family: PingFangSC-Regular;
                        font-size: 13px;
                        color: #2a2a2a;
                        text-align: justify;
                        line-height: 18px;

                        .text-expander-content{
                            max-height: 5000px!important;
                            overflow: hidden;
                            text-overflow: ellipsis;

                            .ref-name{
                                color: #4e759e;
                            }
                        }
                    }
                    .bottom{
                        margin-top: 15px;
                        height: 15px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        padding-right: 15px;
                        font-family: PingFangSC-Regular;
                        font-size: 12px;
                        font-weight: 400;
                        color: #666;

                        .appro-box{
                            width: auto;
                            padding:2px 8px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border: 1px solid #ccc;
                            border-radius: 18px;
                            .zan-img{
                                width: 13px;
                                height: 13px;
                                background: inherit;
                                margin-right: 3px;
                            }
                            .zan-span{
                                line-height: 15px;
                            }
                        }
                    }
           }
      }
      .comment-item:last-child{
          margin-bottom: 70px;
      }
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
  .nothing{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &>img{
        width: 100px;
        height: 100px;
        display: block;
        margin-bottom: 10px;
    }

  }
.replay-con{
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;

    .replay-left {
        width: 75%;
        margin-left: 10px;
        transition: all 0.3s linear;
        &>input{
            width: 100%;
            outline: none;
            background-color: #f5f5f5;
            border: none;
            padding: 6px 20px;
            box-sizing: border-box;
            border-radius: 20px;
            font-size: 14px;
        }
    }
    .replay-right{
        flex: 1;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .pl,
        .fx,
        .zan{
            width: 20px;
            height: 20px;
            display: block;
            position: relative;
        }
        .zan {

            .total{
                font-size: 12px;
                transform: scale(0.85);
                position: absolute;
                top: -5px;
                right: -7px;
            }
        }
        .send{
            font-size: 13px;
            color: #999;
            font-weight: bold;
            border: 1px solid #f5f5f5;
            border-radius: 12px;
            padding: 5px 10px;
            transition: all 0.3s linear;
        }

        .sendactive{
            border-color: #f03d37;
            color: #f03d37;
        }

        .active {
            color: #f03d37;
        }
    }
}

</style>